
<!DOCTYPE html>

<html class="no-js no-scroll" lang="">
    
    <head>
        
        <title>Home</title>
        
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        
        <meta name="description" content=""/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        
		<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
        <link rel="stylesheet" type="text/css" href="../css/main.css"/>
        
    </head>
    
    <body>
        
        <RefreshCollectionView id="list" name="list" class="list" columns="1" is-vertical>
            
            <MovieListCell name="movies" class="list-item" is-row onclick="@selector(viewCover:)">

				<div class="line"></div>
				<img class="cover" name="cover"/>
				<div class="info">
					<label class="title" name="title">Movie Title</label>
					<div class="misc">
						<label class="text" data="year">2015</label>
						<label class="sep">•</label>
						<label class="text" id="critics-label" name="critics">Critics</label>
					</div>
				</div>
				
            </MovieListCell>
            
        </RefreshCollectionView>

        <style>
            
            body {
                width: 100%;
                height: 100%;
				background-color: white;
            }
        
			.list {
				display: block;
				width: 100%;
				height: 100%;
				z-index: 1;
			}
			
			.list-item {
				display: block;
				width: 100%;
				height: 100px;
			}

			.line {
				display: block;
				width: 100%;
				height: 1px;
				background-color: #ddd;
				position: absolute;
			}
		
			.cover {
				display: inline-block;
				height: 80px;
				width: 54px;
				content-mode: fill;
				background-color: #eee;
				margin-left: 10px;
				margin-top: 10px
			}
			
			.info {
				display: inline-block;
				width: 200px;
				height: 30px;
				margin-left: 10px;
				margin-top: 10px;
			}
			
			.title {
				display: block;
				width: 100%;
				height: 20px;
			}
			
			.misc {
				display: block;
				width: 100%;
				height: 20px;
			}
			
			.text {
				display: inline-block;
				width: auto;
				height: 100%;
			}
			
			.sep {
				display: inline-block;
				width: auto;
				height: 100%;
				margin-left: 3px;
				margin-right: 3px;
			}
			
		</style>
        
        
    </body>
    
</html>
